<template>
    <transition name="fade">
        <div class="vlonChooseLink" v-if="showChooseLinkWrapper">
            <div class="box">
                <div class="head">
                    <div class="left">链接选择器</div>
                    <div class="right">
                        <el-button type="default" class="close" @click="closeThisWindow">
                            <i class="el-icon-close"></i>
                        </el-button>
                    </div>
                </div>
                <div class="body">
                    <div class="left">
                        <ul class="scrollbar">
                            <li v-for="(ll, linkGroupIndex) in left.list" :key="ll.id" :class="ll.expand ? 'open' : ''">
                                <div class="head" @click.stop="switchThisExpandItem(ll, linkGroupIndex)">
                                    <span class="left" :class="ll.expand ? 'on' : ''">{{ ll.name }}</span>
                                    <!-- <i
                    class="right"
                    :class="
                      ll.expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i> -->
                                </div>
                                <!-- <transition name="fade">
                  <div class="body" v-if="ll.expand">
                    <ul v-if="ll.list && ll.list.length > 0">
                      <li
                        v-for="(lll, index2) in ll.list"
                        :key="lll.id"
                        :class="lll.active"
                        @click="chooseThisItem(lll, index1, index2)"
                      >
                        {{ lll.name }}
                      </li>
                    </ul>
                  </div>
                </transition> -->
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <!-- <div class="head">
              <el-input
                v-model="search.key"
                style="width: 300px; margin-left: 15px"
              >
                <el-button slot="append" type="text" style="width: 60px"
                  >搜索</el-button
                >
              </el-input>
            </div> -->
                        <div class="body scrollbar">
                            <div class="wrapper" v-if="right">
                                <ul class="list">
                                    <li v-for="(rl, linkIndex) in right" :key="rl.id">
                                        <el-button class="link" @click="chooseThisLink(rl, linkIndex)" :type="rl.active ? 'primary' : 'default'">
                                            {{ rl.name }}
                                        </el-button>
                                    </li>
                                    <!-- <li v-for="(rl, index3) in right.list" :key="rl.id">
                    <span class="head">{{ rl.name }}</span>
                    <div class="body">
                      <el-button
                        class="link"
                        v-for="(rll, index4) in rl.list"
                        :key="rll.id"
                        @click="chooseThisLink(rll, index3, index4)"
                        :type="rll.active ? 'primary' : 'default'"
                      >
                        {{ rll.name }}
                      </el-button>
                    </div>
                  </li> -->
                                </ul>
                            </div>
                            <div class="empty" v-if="!right||right.length==0">
                                <p style="display:flex;width:100%;height:400px;font-size:14px;color:#888;justify-content:center;align-items:center;">暂无相关内容</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="foot">
                    <el-button type="default" @click="closeThisWindow">取 消</el-button>
                    <el-button type="primary" class="confirm" @click="chooseAfterConfirm">确 定</el-button>
                </div>
            </div>




            <el-dialog
                title="选择项目链接"
                width="50%"
                top="20vh!important"
                :visible.sync="chooseLinkForProject.show"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :before-close="closeChooseLinkForProjectDialog">
                
                <div class="linkBox">
                    <el-button v-for="(link,linkIndex) in chooseLinkForProject.list" :key="link.id" @click="chooseLinkForProjectHandle(linkIndex)" :type="link.active ? 'primary' : 'default'">{{link.name}}</el-button>
                </div>

                <span slot="footer" class="dialog-footer">
                    <i style="font-style:normal;color:red;font-size:12px;float:left;" v-if="chooseLinkForProject.showTips">请选择项目链接</i>
                    <el-button @click="closeChooseLinkForProjectDialog">取 消</el-button>
                    <el-button type="primary" @click="saveChooseLinkForProject">确 定</el-button>
                </span>
            </el-dialog>





        </div>
    </transition>
</template>

<script>
import { mapState } from "vuex";
import wtb3 from "../../../assets/images/wtb3.png";
import headApi from '@/utils/hade';
import Bus from "@/utils/bus";
import { getToken } from "@/utils/auth";
export default {
    name: "vlonChooseLink",
    data() {
        return {
            showChooseLinkWrapper: false,
            restaurants: [],
            search: {
                key: "",
                placeholder: "",
            },
            left: {
                //当前选中项
                current: {
                    index: 0,
                    id: "", //链接id
                    url: "", //链接网址
                    name: "", //链接名称
                },
                index: 0, //标识当选中的是哪个链接分组的索引
                list: [
                    {
                        id: 1,
                        name: "自定义页面",
                        expand: true,
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                        list: [],
                    },
                    {
                        id: 2,
                        name: "个性化页面",
                        expand: false,
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                        list: [
                            {
                                id: 0,
                                name: "登录",
                                url: "Login",
                                active: "",
                            },
                            {
                                id: 1,
                                name: "佣金模板",
                                url: "/commissionTemplate/0",
                                active: "",
                            },
                            {
                                id: 2,
                                name: "账单信息",
                                url: "/myBill/0",
                                active: "",
                            },
                            {
                                id: 3,
                                name: "我的团队",
                                url: "/myTeam/0",
                                active: "",
                            },
                            {
                                id: 4,
                                name: "邀请页页面",
                                url: "/invitation/0",
                                active: "",
                            },
                            {
                                id: 5,
                                name: "码管理页面",
                                url: "/codeManage/0",
                                active: "",
                            },
                            {
                                id: 6,
                                name: "数据明细",
                                url: "/dataDetails/0",
                                active: "",
                            },
                            {
                                id: 7,
                                name: "数据页面",
                                url: "/pullNewSummary/0",
                                active: "",
                            },
                            {
                                id: 8,
                                name: "展业页面",
                                url: "/promote/0",
                                active: "",
                            },
                        ],
                    },
                    {
                        id: 3,
                        name: "固定页面",
                        expand: false,
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                        list: [
                            {
                                id: 1,
                                name: "注册",
                                url: "Register",
                                active: "",
                            },
                            {
                                id: 2,
                                name: "修改密码",
                                url: "RetrievePassword",
                                active: "",
                            },
                            {
                                id: 3,
                                name: "实名认证",
                                url: "RealNameAuthentication",
                                active: "",
                            },
                            {
                                id: 4,
                                name: "我的上级",
                                url: "Popup",
                                active: "",
                            },
                            {
                                id: 5,
                                name: "任务奖励",
                                url: "RewardActivities",
                                active: "",
                            },
                            {
                                id: 6,
                                name: "关于我们",
                                url: "Aboutus",
                                active: "",
                            },
                            {
                                id: 7,
                                name: "帮助中心",
                                url: "Help",
                                active: "",
                            },
                            {
                                id: 8,
                                name: "公告",
                                url: "Message",
                                active: "",
                            },
                            {
                                id: 9,
                                name: "提现",
                                url: "Withdrawal",
                                active: "",
                            },
                            {
                                id: 10,
                                name: "提现明细",
                                url: "WithdrawalHistory",
                                active: "",
                            },
                            {
                                id: 11,
                                name: "绑定提现账户",
                                url: "WithdrawalAccounts",
                                active: "",
                            },
                            {
                                id: 12,
                                name: "收益排行榜",
                                url: "BusinessRanking",
                                active: "",
                            },
                            {
                                id: 13,
                                name: "交单流程",
                                url: "",
                                active: "",
                            },
                            {
                                id: 14,
                                name: "我的成本",
                                url: "MyCost",
                                active: "",
                            },{
                                id: 15,
                                name: "我的模板",
                                url: "MyTemplate",
                                active: "",
                            },
                        ],
                    },
                    {
                        id: 4,
                        name: "项目",
                        expand: false,
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                        list: [],
                    },
                ],
            },
            right: null, //右侧主区域
            sourceData: null, //打开弹窗携带的参数

            //在自定义配置页，项目模块，为单个项目选择跳转链接时，供可选择的项
            chooseProjectLink: [{
                    id: 5,
                    name: "码管理页面",
                    url: "/codeManage/0",
                    active: "",
                },
                {
                    id: 6,
                    name: "数据明细",
                    url: "/dataDetails/0",
                    active: "",
                },
                {
                    id: 7,
                    name: "数据页面",
                    url: "/pullNewSummary/0",
                    active: "",
                },
                {
                    id: 8,
                    name: "展业页面",
                    url: "/promote/0",
                    active: "",
            }],

            //在链接选择器，项目分组中，点击具体某个项目时，弹出弹窗，选择链接，回到链接选择器，再点保存，把项目id和链接地址一同保存给需要的按钮
            chooseLinkForProject: {
                show: false, //控制选择弹窗隐藏或显示
                showTips: false, //显示提示语
                current: {//选中的链接
                    value: "", //选中的链接地址
                    index: -1, //选中的链接索引
                },
                //可供选择的列表项
                list: [{
                        id: 5,
                        name: "码管理页面",
                        url: "/codeManage/0",
                        active: "",
                    },
                    {
                        id: 6,
                        name: "数据明细",
                        url: "/dataDetails/0",
                        active: "",
                    },
                    {
                        id: 7,
                        name: "数据页面",
                        url: "/pullNewSummary/0",
                        active: "",
                    },
                    {
                        id: 8,
                        name: "展业页面",
                        url: "/promote/0",
                        active: "",
                }]
            }
        };
    },
    props: [],
    components: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.getCustomizePageList();
            this.getInvitationPageList();
            this.getProjectLinkList()
        });
        Bus.$off("openChooseLinkGroup");
        Bus.$on("openChooseLinkGroup", (params) => {
            // //console.log("已接收到打开选择跳转链接打开弹窗的要求",params);
            this.showChooseLinkWrapper = true;
            this.sourceData = JSON.stringify(params);


           //单独处理的逻辑
           if(params.name == "chooseInProjectLink") {
             //若是为单个项目，选择跳转链接
             this.right = this.chooseProjectLink;
             this.left.index = 1;
              this.left.list[0].expand=false;
              this.left.list[1].expand=true;
           }



            //编辑时，回写选中状态
            if (params.linkName) {
                //遍历回写选中
            }
        });
    },
    methods: {
        //点击 左侧 切换 展开或收起一级大分类
        switchThisExpandItem(row, index) {
            // console.log("链接分组索引: ", index);
          //暂时处理逻辑，针对单个项目，选择进入链接
            if(JSON.parse(this.sourceData).name == "chooseInProjectLink") {
              this.left.index = index;
              this.left.list.forEach((item) => {
                if (item.id == row.id) {
                    item.expand = true;
                } else {
                    item.expand = false;
                }
              });
              if(index==1) {
                this.right = this.chooseProjectLink;
              }else{
                this.right = [];
              }
              return false;
            }

            //、、、、、、、、、、、、、、、、、、、、、、、、、、、、以上为暂时处理逻辑

            this.left.index = index;
            this.left.list.forEach((item) => {
                if (item.id == row.id) {
                    item.expand = true;
                    this.right = JSON.parse(JSON.stringify(item.list));
                } else {
                    item.expand = false;
                }
            });
        },

        //点击 中间主区域，商城页面的内容列表，选择当前页面网址
        chooseThisLink(row, index) {
            this.right.forEach((subItem,idx) => {
                if(index != idx) {
                    subItem.active = false;
                }
            });

            if (this.right[index].active) {
                this.right[index].active = false;
                this.left.current.id = "";
                this.left.current.url = "";
                this.left.current.name = "";
            } else {
                this.right[index].active = true;
                this.left.current.id = this.right[index].id;
                this.left.current.url = this.right[index].url;
                this.left.current.name = this.right[index].name;
                if(this.left.index==3) {
                    this.chooseLinkForProject.show = true;
                }
            }
           
        },
        //改变一页显示多少条数据
        handleSizeChange(size) {},
        //翻页
        handleCurrentChange(page) {},
        //点击 关闭 按钮，关掉当前选择链接的弹窗
        closeThisWindow() {
            // //console.log("closeThisWindow");
            this.setDefault();
            this.setChooseLinkForProjectDefault();
        },
        //设置默认初始化状态
        setDefault() {
            //console.log("setDefault");
            this.sourceData = null;
            this.left.current.index = 0;
            this.left.current.id = "";
            this.left.current.url = "";
            this.left.current.name = "";

            this.left.list.forEach((leftListItem, leftListItemIndex) => {
                if (leftListItemIndex == 0) {
                    leftListItem.expand = true;
                } else {
                    leftListItem.expand = false;
                }
                if (leftListItem.pages) {
                    leftListItem.pages.currentPage = 1;
                    leftListItem.pages.pageSize = 10;
                }
                if (leftListItem.list && leftListItem.list.length > 0) {
                    leftListItem.list.forEach((linkItem, linkItemIndex) => {
                        if (linkItemIndex == 0) {
                            linkItem.active = "active";
                        } else {
                            linkItem.active = "";
                        }
                    });
                }
            });
            // //console.log("will close");
            this.showChooseLinkWrapper = false;
        },
        //选择链接后点击确认按钮
        chooseAfterConfirm() {
            // console.log("chooseAfterConfirm");
            if (this.left.current.url != "" || this.left.current.name != "") {
                //this.$parent.oItem.list[this.$parent.currentIndex].linkUrl = this.left.current.url;
                //this.$parent.oItem.list[this.$parent.currentIndex].linkName = this.left.current.name;
                //this.$parent.updateData();

                //若链接分组是项目，则需要把项目id和链接合并起来
                if(this.left.index==3) {
                    //标识“项目链接”+项目id+链接地址
                    this.left.current.url = "项目链接__"+this.left.current.id+"__"+this.chooseLinkForProject.current.value;
                }

                if (!this.sourceData) {
                    this.$message.error("数据异常，请退出重试");
                    return false;
                }
                let d = JSON.parse(this.sourceData);
                if (d.name === "openChooseSingleLink") {
                    Bus.$emit(`openChooseSingleLink${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "carouseImgChooseLinkGroup") {
                    Bus.$emit(`carouseImgChooseLinkGroupAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "announcementGroup") {
                    Bus.$emit(
                        `announcementChooseLinkGroupAfter${d.controlid}`,
                        {
                            url: this.left.current.url,
                            name: this.left.current.name,
                        }
                    );
                } else if (d.name == "imgGroupChooseLink") {
                    Bus.$emit(`imgGroupChooseLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "buttonListChooseLink") {
                    Bus.$emit(`buttonListChooseLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "listNavChooseLink") {
                    Bus.$emit(`listNavChooseLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "chooseLink") {
                    Bus.$emit(`chooseLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                } else if (d.name == "authLink") {
                    Bus.$emit(`chooseAuthLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                        ename: d.name,
                    });
                } else if (d.name == "bottomMenuIconLink") {
                    Bus.$emit(`chooseBottomMenuIconLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                        ename: d.name,
                    });
                } else if (d.name == "bottomMenuImgLink") {
                    Bus.$emit(`chooseBottomMenuImgLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                        ename: d.name,
                    });
                } else if (d.name == "setLink") {
                    Bus.$emit(`chooseSetLinkAfter${d.controlid}`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                        ename: d.name,
                    });
                } else if(d.name == "chooseInProjectLink"){
                  console.log("选择完毕",this.left.current.name,this.left.current.url);
                    Bus.$emit(`chooseSetLinkAfterChooseInProjectLink`, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                        ename: d.name,
                    });
                } else {
                    let t =
                        d.controlid +
                        "__" +
                        d.controlsIndex +
                        "__" +
                        d.rightIndex +
                        "__" +
                        d.catalogIndex;
                    Bus.$emit("updateChooseLinkData__" + t, {
                        url: this.left.current.url,
                        name: this.left.current.name,
                    });
                }
            }
            this.closeThisWindow();
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value
                    ? restaurant.value
                          .toLowerCase()
                          .indexOf(queryString ? queryString.toLowerCase() : "")
                    : "" === 0;
            };
        },
        //获取自定义页面列表，供选择链接使用
        getCustomizePageList() {
            //pageType： 0 自定义页面 1 个性化页面
            if (getToken()) { 
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            "pageType": 0,
                            "tenantId": localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        if (res && res.data) {
                            console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    let list = [];
                                    data.forEach((item) => {
                                        list.push({
                                            id: item.id,
                                            name: item.pageName,
                                            url: "/decorate/" + item.id,
                                            active: "",
                                        });
                                    });
                                    this.left.list[0].list = list;
                                    this.right = list;
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        //获取个性化页面列表，供选择链接使用
        getInvitationPageList() {
            //pageType： 0 自定义页面 1 个性化页面
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            pageType: 1,
                            tenantId: localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        if (res && res.data) {
                            console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    let list = this.left.list[1].list;
                                    data.forEach((item) => {
                                        list.forEach((row) => {
                                            if (
                                                row.name == item.pageName ||
                                                row.name == item.pageKey
                                            ) {
                                                row.name = item.pageName;
                                                row.url = row.url.replace(
                                                    "/0",
                                                    "/" + item.id
                                                );
                                            }
                                        });
                                    });
                                    this.left.list[1].list = list;
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        //获取项目列表，供选择跳转
        getProjectLinkList() {
            if(getToken()) {
                this.axios.get(`${headApi}/business/project/list?pageNum=${this.left.list[3].pages.currentPage}&pageSize=${this.left.list[3].pages.pageSize}`, { headers: { Authorization: "Bearer " + getToken() } }).then(res=>{
                    let {code, data, msg} = res.data;
                    if(code == 200) {
                        let list = data.list;
                        if(list && list.length>0) {
                            let newList = JSON.parse(JSON.stringify(list));
                            newList.forEach(item => {
                                item.name = item.proName;
                                item.id = item.proId;
                                item.active = "";
                                item.url = "项目页面__"+item.proName+"__"+item.proId; //这里需要绑定最终落地页地址，因此这里的url暂未用上
                            })
                            this.left.list[3].list = newList;
                            this.left.list[3].pages.total = data.total
                        } else {
                            //项目列表为空
                        }
                    } else {
                        this.$message.warning(msg);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        //关闭掉，为链接选择器的项目分组中，具体某个项目选择跳转链接的弹窗
        closeChooseLinkForProjectDialog() {
            this.chooseLinkForProject.show = false;
            setTimeout(()=>{
                this.setChooseLinkForProjectDefault();
            }, 1000)
        },
        setChooseLinkForProjectDefault(){
            this.chooseLinkForProject.list.forEach(item => {
                item.active = false;
            })
            this.chooseLinkForProject.current.value = "";
            this.chooseLinkForProject.current.index = -1;
            this.chooseLinkForProject.showTips = false;
        },
        //在链接选择器的项目分组中，具体某个项目，弹出弹窗，选中跳转链接的事件
        chooseLinkForProjectHandle(idx) {
            this.chooseLinkForProject.list.forEach((item, index) => {
                if(index == idx) {
                    if(this.chooseLinkForProject.current.index === index) {
                        item.active = false;
                        this.chooseLinkForProject.current.value = "";
                        this.chooseLinkForProject.current.index = -1;
                    } else {
                        item.active = true;
                        this.chooseLinkForProject.current.value = item.url;
                        this.chooseLinkForProject.current.index = index;
                        this.chooseLinkForProject.showTips = false;
                    }
                } else {
                    item.active = false;
                }
            })
            
        },
        //为链接选择器的项目分组中，具体某个项目选择跳转链接后，点击保存的事件
        saveChooseLinkForProject() {
            if(this.chooseLinkForProject.current.value) {
                 this.chooseLinkForProject.show = false;
            } else {
                this.chooseLinkForProject.showTips = true;
            }
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>

<style scoped lang="scss">
.vlonChooseLink {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 99001;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
        width: 1000px;
        height: 610px;
        background-color: #fff;
        border-radius: 3px;
        & > .head {
            display: flex;
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #eee;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;
            & > .left {
                font-size: 14px;
                color: #666;
            }
            & > .right {
                display: flex;
                justify-content: flex-end;
                .close {
                    border: none;
                    background-color: transparent;
                    width: 40px;
                    height: 100%;
                    .el-icon-close {
                        font-size: 18px;
                    }
                }
            }
        }
        & > .body {
            display: flex;
            width: 100%;
            height: calc(100% - 90px);
            position: relative;
            overflow: hidden;
            & > .left {
                width: 150px;
                height: 100%;
                border-right: 1px solid #f5f5f5;
                box-sizing: border-box;
                & > ul {
                    height: 100%;
                    overflow-x: hidden;
                    overflow-y: auto;
                    & > li {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        box-sizing: border-box;
                        transition: all 0.3s;
                        cursor: pointer;
                        & > .head {
                            display: flex;
                            padding: 0 20px;
                            height: 50px;
                            width: 100%;
                            box-sizing: border-box;
                            align-items: center;
                            justify-content: space-between;

                            & > .left {
                                display: flex;
                                align-items: center;
                                font-size: 14px;

                                height: 100%;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                &.on {
                                    font-weight: bold;
                                }
                            }
                            & > .right {
                                display: flex;
                            }
                        }
                        & > .body {
                            width: 100%;
                            & > ul {
                                width: 100%;
                                & > li {
                                    width: 100%;
                                    font-size: 12px;
                                    display: flex;
                                    padding: 0 20px;
                                    height: 50px;
                                    box-sizing: border-box;
                                    align-items: center;
                                    position: relative;
                                    &:hover,
                                    &.active {
                                        background-color: #dbdfff;
                                        &::after {
                                            content: "";
                                            position: absolute;
                                            width: 2px;
                                            height: 100%;
                                            background-color: royalblue;
                                            top: 0;
                                            right: 0;
                                        }
                                    }
                                }
                            }
                        }
                        &.open {
                            & > .body {
                                background-color: rgba(0, 0, 0, 0.05);
                            }
                        }
                    }
                }
            }
            & > .right {
                font-size: 12px;
                flex-direction: column;
                display: flex;
                width: calc(100% - 150px);
                height: 100%;
                & > .head {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                }
                & > .body {
                    height: calc(100% - 50px);
                    width: 100%;
                    overflow-x: hidden;
                    overflow-y: auto;

                    .wrapper {
                        ul.list {
                            display: flex;
                            flex-wrap: wrap;
                            padding: 0px 15px 15px 0px;
                            box-sizing: border-box;
                            li {
                                margin: 15px 0 0 15px;
                                span.head {
                                    font-size: 14px;
                                    height: 50px;
                                    display: flex;
                                    align-items: center;
                                    font-weight: bold;
                                    padding-left: 15px;
                                }
                                & > .body {
                                    display: flex;
                                    flex-wrap: wrap;
                                    padding-left: 15px;
                                    width: 100%;
                                    padding-top: 15px;
                                    box-sizing: border-box;
                                    .link {
                                        font-size: 14px;
                                        margin-bottom: 15px;
                                        margin-right: 15px;
                                        width: 130px;
                                        padding-left: 10px;
                                        padding-right: 10px;
                                        white-space: normal;
                                    }
                                    .el-button + .el-button {
                                        margin-left: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        & > .foot {
            display: flex;
            width: 100%;
            height: 50px;
            border-top: 1px solid #eee;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            .confirm {
                margin-left: 50px;
            }
        }
    }
}
</style>
